<template>
  <div id="login_box">
    <h2>LOGIN</h2>
    <div id="input_box">
      <input type="text" placeholder="请输入用户名" v-model="username">
    </div>
    <div class="input_box">
      <input type="password" placeholder="请输入密码" v-model="password">
    </div>
    <button @click="login">登录</button><br>
    <a id="sign_up" href="#">注册账号</a>
  </div>
</template>

<script>
// 导入背景图片
import backgroundImage from '@/assets/login.jpg';

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  mounted() {
    // 设置 body 的背景图片
    document.body.style.backgroundImage = `url(${backgroundImage})`;
    document.body.style.backgroundRepeat = 'no-repeat';
    document.body.style.backgroundSize = '100% 130%';
  },
  methods: {
    login() {
      // 在这里添加登录逻辑
      console.log(`Username: ${this.username}, Password: ${this.password}`);
    }
  }
}
</script>

<style scoped>
#login_box {
  width: 20%;
  height: 400px;
  background-color: #00000060;
  margin: auto;
  margin-top: 10%;
  text-align: center;
  border-radius: 10px;
  padding: 50px 50px;
}

h2 {
  color: #ffffff90;
  margin-top: 5%;
}

#input_box, .input_box {
  margin-top: 5%;
}

span {
  color: #fff;
}

input {
  border: 0;
  width: 60%;
  font-size: 15px;
  color: #fff;
  background: transparent;
  border-bottom: 2px solid #fff;
  padding: 5px 10px;
  outline: none;
  margin-top: 10px;
}

button {
  margin-top: 50px;
  width: 60%;
  height: 30px;
  border-radius: 10px;
  border: 0;
  color: #fff;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  background-image: linear-gradient(to right, #30cfd0, #330867);
}

#sign_up {
  margin-top: 45%;
  margin-left: 60%;
}

a {
  color: #b94648;
}
</style>